<template>

  <div>

    <sky-panel-position-group scrolltop='150' offsettop='150'>
      <sky-panel-position-unit prop="alibaba" label="阿里巴巴"></sky-panel-position-unit>
      <sky-panel-position-unit prop="jingdong" label="京东"></sky-panel-position-unit>
      <sky-panel-position-unit prop="xiaomi" label="小米商城"></sky-panel-position-unit>
      <sky-panel-position-unit prop="wangyi" label="网易优选"></sky-panel-position-unit>
      <sky-panel-position-unit prop="meituan" label="美团"></sky-panel-position-unit>
      <sky-panel-position-unit prop="element" label="饿了吗"></sky-panel-position-unit>
      <sky-panel-position-unit prop="youpinghui" label="优品汇"></sky-panel-position-unit>
      <sky-panel-position-unit prop="tengxun" label="腾讯"></sky-panel-position-unit>
      <sky-panel-position-unit prop="huawei" label="华为"></sky-panel-position-unit>
    </sky-panel-position-group>

    <sky-panel title="阿里巴巴" id="alibaba">
      <template v-slot:main>
        <div h250></div>
      </template>
    </sky-panel>
    <sky-panel title="京东" id="jingdong">
      <template v-slot:main>
        <div h250></div>
      </template>
    </sky-panel>
    <sky-panel title="小米商城" id="xiaomi">
      <template v-slot:main>
        <div h250></div>
      </template>
    </sky-panel>
    <sky-panel title="网易优选" id="wangyi">
      <template v-slot:main>
        <div h250></div>
      </template>
    </sky-panel>
    <sky-panel title="美团" id="meituan">
      <template v-slot:main>
        <div h250></div>
      </template>
    </sky-panel>
    <sky-panel title="饿了吗" id="element">
      <template v-slot:main>
        <div h250></div>
      </template>
    </sky-panel>
    <sky-panel title="优品汇" id="youpinghui">
      <template v-slot:main>
        <div h250></div>
      </template>
    </sky-panel>
    <sky-panel title="腾讯" id="tengxun">
      <template v-slot:main>
        <div h250></div>
      </template>
    </sky-panel>
    <sky-panel title="华为" id="huawei">
      <template v-slot:main>
        <div h250></div>
      </template>
    </sky-panel>

    <sky-code-panel>
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
        <code class="html">

          &lt;sky-panel-position-group scrolltop='150' offsettop='150'&gt;
            &lt;sky-panel-position-unit prop="alibaba" label="阿里巴巴"&gt;&lt;/sky-panel-position-unit&gt;
            &lt;sky-panel-position-unit prop="jingdong" label="京东"&gt;&lt;/sky-panel-position-unit&gt;
            &lt;sky-panel-position-unit prop="xiaomi" label="小米商城"&gt;&lt;/sky-panel-position-unit&gt;
            &lt;sky-panel-position-unit prop="wangyi" label="网易优选"&gt;&lt;/sky-panel-position-unit&gt;
            &lt;sky-panel-position-unit prop="meituan" label="美团"&gt;&lt;/sky-panel-position-unit&gt;
            &lt;sky-panel-position-unit prop="element" label="饿了吗"&gt;&lt;/sky-panel-position-unit&gt;
            &lt;sky-panel-position-unit prop="youpinghui" label="优品汇"&gt;&lt;/sky-panel-position-unit&gt;
            &lt;sky-panel-position-unit prop="tengxun" label="腾讯"&gt;&lt;/sky-panel-position-unit&gt;
            &lt;sky-panel-position-unit prop="huawei" label="华为"&gt;&lt;/sky-panel-position-unit&gt;
          &lt;/sky-panel-position-group&gt;
          
        </code>

    </pre>
      </div>
    </sky-code-panel>

  </div>

</template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    setup() {},
  });
</script>

<style scoped>
</style>